<template>
  <div>
    <el-row class="er1" type="flex" justify="center">
      <el-col :span="11">
        <img src="./Backups.png" />
      </el-col>
      <el-col :span="3"></el-col>
      <el-col :span="8" class="ec1">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="管理数据库备份" name="first">
            <el-button
                style="background-color: #005aca"
                type="info"
                class="but"
                @click="backups"
            ><b>管理数据库备份</b></el-button
            >
            <vxe-table
                class="vt"
                border="inner"
                :show-header="false"
                :data="tableData1"
            >
              <vxe-column field="name" title="Name" width="330px"></vxe-column>
              <vxe-column
                  field="date"
                  title="Date"
                  min-width="120px"
                  sortable
              ></vxe-column>
            </vxe-table>
          </el-tab-pane>
          <el-tab-pane label="空间数据库备份" name="second">
            <el-button
                style="background-color: #005aca"
                type="info"
                class="but"
                @click="backups"
            ><b>空间数据库备份</b></el-button
            >
            <vxe-table
                class="vt"
                border="inner"
                :show-header="false"
                :data="tableData2"
            >
              <vxe-column field="name" title="Name" width="330px"></vxe-column>
              <vxe-column
                  field="date"
                  title="Date"
                  min-width="120px"
                  sortable
              ></vxe-column>
            </vxe-table>
          </el-tab-pane>
          <el-tab-pane label="云端管理系统备份" name="third">
            <el-button
                style="background-color: #005aca"
                type="info"
                class="but"
                @click="backups"
            ><b>云端管理系统备份</b></el-button
            >
            <vxe-table
                class="vt"
                border="inner"
                :show-header="false"
                :data="tableData3"
            >
              <vxe-column field="name" title="Name" width="330px"></vxe-column>
              <vxe-column
                  field="date"
                  title="Date"
                  min-width="120px"
                  sortable
              ></vxe-column>
            </vxe-table>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "BackupsList",
  data() {
    return {
      activeName: "first",
      tableData1: [
        { name: "管理数据库备份20220801122432", date: "2020-08-01 12:24:32" },
        { name: "管理数据库备份20220801132432", date: "2020-08-01 13:24:32" },
        { name: "管理数据库备份20220801142432", date: "2020-08-01 14:24:32" },
        { name: "管理数据库备份20220801152432", date: "2020-08-01 15:24:32" },
      ],
      tableData2: [
        { name: "空间数据库备份20220801122432", date: "2020-08-01 12:24:32" },
        { name: "空间数据库备份20220801132432", date: "2020-08-01 13:24:32" },
        { name: "空间数据库备份20220801142432", date: "2020-08-01 14:24:32" },
        { name: "空间数据库备份20220801152432", date: "2020-08-01 15:24:32" },
      ],
      tableData3: [
        { name: "云端管理系统备份20220801122432", date: "2020-08-01 12:24:32" },
        { name: "云端管理系统备份20220801132432", date: "2020-08-01 13:24:32" },
        { name: "云端管理系统备份20220801142432", date: "2020-08-01 14:24:32" },
        { name: "云端管理系统备份20220801152432", date: "2020-08-01 15:24:32" },
      ],
    };
  },
  methods: {
    backups() {},
    // 选项卡
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style lang="scss" scoped>
.er1 {
  width: 98%;
  margin-left: 1%;
  background-color: #ffffff;
  padding: 20px 20px 20px 20px;
  text-align: center;
}
.ec1 {
  margin-top: 80px;
  el-tabs{
    width: 600px;
  }
}
.but {
  width: 490px;
  height: 40px;
  text-align: center;
}
.vt {
  margin-top: 20px;
}
.el-tabs {
  ::v-deep.el-tabs__item.is-active {
    color: #FFFFFF !important;
    font-weight: 700;
  }
}
</style>
